<template>
	<view class="container">
		<scroll-view class="scroll" scroll-y="true">
			<view class="c-center">
				<view class="address" v-for="(item,index) in list" :key="index">
					<view class="adres">
						<view class="c-adres">
							<view class="shr">
								<view>收货人：</view>
								<view>{{item.realName}}</view>
							</view>
							<view class="shr">
								<view>手机号：</view>
								<view>{{item.phone}}</view>
							</view>
							<view class="shr shdz">
								<view class="shadres">收货地址：</view>
								<view class="xxadres">{{item.province}}</view>
								<view class="xxadres">{{item.city}}</view>
								<view class="xxadres">{{item.district}}</view>
								<view class="xxadres">{{item.detail}}</view>
							</view>
						</view>
						<view class="xian"></view>
						<view class="moren">
							<view class="mrl" @click="mrSet(index)">
								<view class="mrimg">
									<image :src="getImageSrc(item.isDefault)" />
								</view>
								<view class="mrbtn">设为默认</view>
							</view>
							<view class="mrr">
								<view class="updata" @click="remove(item.id)">
									<view class="bjimg">
										<image src="../../../static/image/shop/13.png" mode=""></image>
									</view>
									<view class="bjtxt">
										删除
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="add" @click="adres">
			<button class="addbtn">添加新地址</button>
		</view>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js"
	export default {
		data() {
			return {
				// token
				token: wx.getStorageSync('shopToken'),
				list: [],
				imagePaths: {
					true: '../../../static/image/shop/11.png',
					false: '../../../static/image/shop/10.png'
				}
			}
		},
		mounted() {
			this.adsList();
		},
		methods: {
			getImageSrc(isDefault) {
				return this.imagePaths[isDefault] || this.imagePaths.false;
			},
			mrSet(index) {
				this.list.forEach((item, i) => {
					if (i === index) {
						item.isDefault = true;
					} else {
						item.isDefault = false;
					}
				});

				const id = this.list[index].id
				// 更新默认地址状态

				$http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/address/default/set',
					data: {
						id: id
					},
					method: 'POST'
				}, 2).then((res) => {
					console.log(res, "更新状态");
				})
			},

			// 查询地址列表
			adsList() {
				$http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/address/list',
					method: 'GET'
				}, 2).then((res) => {
					this.list = res.list;
				})
			},

			// 删除
			remove(id) {
				wx.showModal({
					title: "提示",
					content: '您是否确定删除此项地址？',
					success: (res) => {
						if (res.confirm) {
							this.removeList(id);
						} else if (res.cancel) {
							wx.showToast({
								title: '已取消',
								icon: 'none'
							});
						}
					}
				});
			},

			removeList(id) {
				wx.showLoading({
					title: '正在删除地址...',
					mask: true // 是否显示透明蒙层，防止用户继续操作
				});

				$http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/address/del',
					method: 'POST',
					data: {
						id: id
					}
				}, 2).then((res) => {
					console.log(res, "删除");
					if (res.code === 200) {
						setTimeout(() => {
							this.adsList();
							wx.hideLoading(); // 隐藏加载提示
							wx.showToast({
								title: '地址已删除',
								icon: 'success'
							});
						}, 1500);
					} else {
						setTimeout(() => {
							wx.hideLoading();
							wx.showToast({
								title: '删除失败，请重试',
								icon: 'none'
							});
						}, 1500);
					}
				}).catch((err) => {
					setTimeout(() => {
						wx.hideLoading();
						wx.showToast({
							title: '删除失败，请检查网络',
							icon: 'none'
						});
					}, 1500);
				});
			},




			adres() {
				uni.navigateTo({
					url: "/pages/shop/saveAdres/index"
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.container {
		width: 100%;
		background-color: #f5f5f5;

		.scroll {
			height: calc(100vh);
		}

		.c-center {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.address {
			width: 674rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			border-radius: 15rpx;
			margin-top: 20rpx;

			.adres {
				width: 600rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.c-adres {
					width: 600rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					margin-top: 20rpx;
					line-height: 60rpx;
				}

				.shr {
					display: flex;
					flex-direction: row;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					white-space: nowrap;
					overflow-x: hidden;
				}

				.shdz {
					.shadres {
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						line-height: 40rpx;
					}

					.xxadres {
						font-weight: 400;
						font-size: 26rpx;
						color: #808080;
						line-height: 40rpx;
					}
				}

				.xian {
					position: relative;
					width: 600rpx;
					height: 1rpx;
					background-color: #eeeeee;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}

				.moren {
					width: 600rpx;
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.mrl {
						width: 145rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.mrimg {
							image {
								width: 29rpx;
								height: 28rpx;
							}
						}

						.mrbtn {
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							line-height: 40rpx;
						}
					}

					.mrr {
						.updata {
							display: flex;
							flex-direction: row;

							.bjimg {
								image {
									width: 26rpx;
									height: 28rpx;
								}
							}

							.bjtxt {
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;
								margin-left: 15rpx;
								line-height: 40rpx;
							}
						}
					}
				}
			}
		}

		.add {
			position: fixed;
			bottom: 10rpx;
			width: 100%;

			.addbtn {
				width: 670rpx;
				height: 91rpx;
				line-height: 91rpx;
				background: linear-gradient(to right top, rgba(57, 187, 172, 1), rgba(18, 135, 144, 1));
				font-weight: 400;
				font-size: 33rpx;
				color: #FFFFFF;
			}
		}
	}
</style>